<template>
	<view class="">
		<view>
			<view class="qline">
				<view class="l1"></view>
				<view class="l1 l2"></view>
			</view>
			<view class="d-p-t-60">
				<view class="d-qrd" v-if="ticket_no">
					<view class="qcard">
						<view class="q1"></view>
						<view class="q1 q2"></view>
					</view>
					<view class="d-text-center d-p-t-60 d-main">使用时请出示此二维码</view>
					<view class="d-flex d-row-center d-m-t-15">
						<!-- <u-image :src="$demo" width="370rpx" height="370rpx"></u-image> -->
						<uqrcode :ref="'uqrcode' + index" :canvas-id="'qrcode' + index" size="185"
							:value="ticket_no" :options="{ margin: 10 }"></uqrcode>
					</view>
					<!-- <view class="d-main d-font-32 d-text-center d-m-t-30">{{ ticket_no }}</view> -->
					<view class="d-text-center d-99 d-font-28 d-m-t-30">{{member_name}} {{class_num}} {{course}}</view>
					<!-- <view class="d-flex d-row-center d-p-t-20"><u-icon @click="item.show = !item.show"
							name="arrow-up" size="28rpx" color="#59A0FF"></u-icon></view> -->
				</view>
				<view class="d-qrd" v-else>
					<view class="d-text-center d-p-t-60 d-main">未查到课表信息</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyCourse
	} from '@/common/api';
	export default {
		data() {
			return {
				list: [],
				ticket_no:'',
				member_name:'',
				course:'',
				class_num:''
			};
		},
		
		onLoad() {
			this.getMyCourse()
		},
		methods: {
			getMyCourse(page, limit) {
				getMyCourse({})
					.then(res => {
						console.log(res,'res')
						this.ticket_no = res.member_id
						this.member_name = res.member_name
						this.course = res.course
						this.class_num = res.class_num
						// let list = res.data.map(item => {
						// 	item.show = false;
						// 	return item;
						// });
						// this.$refs.paging.complete(list);
					})
					.catch(err => {
						this.$refs.paging.complete(false);
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.d-list-box {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: #ffffff;
		border-radius: 10rpx;
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ff4105;
	}

	.d-bold {
		font-weight: bold;
	}

	.reav {
		position: relative;

		.qed {
			position: absolute;
			right: 0rpx;
			bottom: 0rpx;
		}
	}

	.qline {
		position: relative;

		.l1 {
			width: 20rpx;
			height: 60rpx;
			background: #dce0fd;
			border-radius: 10rpx;
			position: absolute;
			left: 130rpx;
			bottom: -60rpx;
		}

		.l2 {
			left: auto;
			right: 130rpx;
		}
	}

	.d-qrd {
		width: 626rpx;
		min-height: 626rpx;
		background: #ffffff;
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		border-radius: 10rpx;
		margin: -22rpx auto 0;
	}

	.qcard {
		position: relative;

		.q1 {
			width: 22rpx;
			height: 22rpx;
			background: #ffffff;
			border: 4rpx solid #575c86;
			border-radius: 50%;
			box-sizing: border-box;
			position: absolute;
			left: 99rpx;
		}

		.q2 {
			left: auto;
			right: 99rpx;
		}
	}

	.d-main {
		color: #59a0ff;
	}

	.d-99 {
		color: #999;
	}
</style>